<template>
    <div class="body">
        <div class="left">
            <h1>人脸识别与分析</h1>
            <UploadImage ref="uploadImageRef" :limit="5" :fileList="state.fileList" :action="state.faceInspectorServer" :father_method="displayFaceInformation" />
        </div>
        <div class="right">
            <div class="right_item" v-for="item in state.faceInformationList" :key="item">    
                <el-text class="mx-1" type="danger" size="large">颜值：{{ item['Beauty'] }}</el-text>
                <el-text class="mx-1" type="warning" size="large">性别：{{ gender(item['Gender']) }} {{ item['Gender'] }}</el-text>
                <el-text class="mx-1" type="primary" size="large">年龄：{{ item['Age'] }}</el-text>
                <el-text class="mx-1" type="success" size="large">表情：{{ item['Expression'] }}</el-text>
                <el-text class="mx-1" type="info" size="large">眼镜：{{ item['Glass'] }}</el-text>
                <el-text class="mx-1" type="info" size="large">睁眼：{{ item['EyeOpen'] }}</el-text>
            </div>
        </div>
    </div>
</template>  

<script setup>
import UploadImage from '@/components/UploadImage.vue';
import { reactive, ref } from 'vue'
import { faceInspectorServer,deepClone } from '@/utils'

const uploadImageRef = ref(null)
const state = reactive({
    faceInformationList: [],
    faceInspectorServer,
    fileList:[],
})
const gender_dic={99:'男',0:'女'}
const gender=(value)=>{
    if(value>50){
        return '男'
    }else
    if(value<=50&&value>=0){
        return '女'
    }
}
// 子组件传过来数据，父组件显示这些数据
const displayFaceInformation=(data)=>{
    console.log("原始数据：",data)
    state.faceInformationList=[]
    for(let item of data){
        state.faceInformationList.push(deepClone(JSON.parse(item.url)))
    }      
    console.log("人脸数据:", state.faceInformationList)
}
</script>
<style scoped>
.body{
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
    margin: 10px;
}
.left{
    display: flex;
    flex-flow: column nowrap;
}
.right_item{
    display: flex;
    flex-flow: column nowrap;
    justify-content: left;
    align-items: center;
    border-radius: 3px;
    border-style:dotted;
    border-color: chartreuse;
    margin: 10px 10px;
}
.right{
    display: flex;
    flex-flow: row nowrap;
    justify-content:center;
    align-items: center;
    margin: 10px;
}
</style>